<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>登录</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=no" />
	<meta content="email=no" name="format-detection" />
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<style type="text/css">
		@charset "utf-8";
		/*全局*/
		body,div,p,ul,ol,li,dl,dt,dd,form,input,table,img,h1,h2,h3,h4,h5,h6,header,section,footer,nav,figure,figcaption,article{margin:0;padding:0}
		header,section,footer,nav,figure,figcaption,article,aside,dialog,menu{display:block}
		body,input,select,textarea {font-family: "Microsoft Yahei", "Arial", verdana, helvetica, sans-serif;font-size: 12px;}
		img{border:none;display:inline-block;vertical-align:top;}
		table {border-collapse: collapse;border-spacing: 0;}
		th,td {text-align: center;vertical-align: top;}
		h1,h2,h3,h4,h5,h6{font-size:12px;font-weight:normal;}
		a {color: #4d4d4d;text-decoration: none;}
		a:hover {text-decoration: none;}
		fieldset,
		img,input,button,textarea {border: 0;outline: none;}
		ol,ul,li {list-style: none;}
		em {font-style: normal;}
		input[type="text"],input[type="button"],input[type="submit"],input[type="search"],input[type="number"] {-webkit-appearance: none;border-radius: 0}
		input[type="checkbox"] {margin: 0 3px 3px 4px;}
		input {outline: none;}
		video {margin-left: auto;margin-right: auto;max-width: 100%}
		.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
		.clear {clear: both;}

		/* 登录 */
		html{font-size:62.5%;}
		body{color:#666;}
		html,body{-webkit-user-select:none;
		    -o-user-select:none;
		    -ms-user-select:none;
		    user-select:none;
		    -webkit-text-size-adjust:none;
		    -o-text-size-adjust:none;
		    -ms-text-size-adjust:none;
		    text-size-adjust:none;
		    display:box;
		    display:-webkit-box;
		    display:-o-box;
		    display:-moz-box;
		    display:-ms-box;
		    -webkit-box-flex:1;
		    -o-box-flex:1;
		    -ms-box-flex:1;
		    box-flex:1;
		    -webkit-box-orient: vertical;
		    -o-box-orient: vertical;
		    -ms-box-orient: vertical;
		    box-orient: vertical;
		    height: 100%;
		    width: 100%;
		    background: #F5F5F5;
		    overflow: hidden;
		    -webkit-tap-highlight-color:rgba(0,0,0,0);
		    -webkit-tap-highlight-color: transparent;
		}
		.loginSection{width:100%;height:auto;padding: 20px 10px;box-sizing:border-box;}
		.login-form-text{width: 100%;position: relative;}
		.login-form-control {
			width: 100%;
			height: 34px;
			font-size: 14px;
			color: #555555;
			vertical-align: middle;
			border: 1px solid #E2E2E2;
			background-color: #F7F8F9;
			border-radius: 4px;
			padding-left: 25px;
			box-sizing:border-box;
			margin-bottom: 6px;
		}
		.login-from-password {
			width: 100%;
			height: 34px;
			font-size: 14px;
			color: #555555;
			vertical-align: middle;
			border: 1px solid #E2E2E2;
			background-color: #F7F8F9;
			border-radius: 4px;
			padding-left: 25px;
			box-sizing:border-box;
			margin-bottom: 6px;
			
		}
		.login-form-passwd{
			position: relative;
		}
		.login-btn {
			color: #ffffff;
			background-color: #ff2961;
			display: block;
			width: 100%;
			padding: 10px 16px;
			font-size: 18px;
			border-radius: 4px;
			cursor: pointer;
			border: none;
			margin: 20px auto 0px;
		}
		.login-erro-warn,.login-erro-text{color: #f00;}
		/*p.error{display: none;}*/
		.error{color: #f00;}
		input.error{border: 1px solid #f00;}
		.success{display: none;}
		.has-success{display: block; color: green;position: absolute;top: 5px;right: 6px;font-weight: bolder;font-size: 16px;}
	</style>
</head>
<body ng-app="myApp" ng-controller="LoginController">
	<section id="loginSection" class="loginSection">
	<form ng-submit="login()" name="signUpForm">
		<div class="login-form-text">	     
		     <input type="text" class="login-form-control" name="username" ng-model="user.username" placeholder="请输入手机号码" ng-maxlength="11" ng-minlength="11" required>	     
		     <p class="error" ng-if="(signUpForm.username.$error.minlength || signUpForm.username.$error.maxlength) && signUpForm.username.$touched">请输入11位手机号码</p>
		     <p class="error" ng-if="signUpForm.username.$error.required && signUpForm.username.$touched">手机号码不能为空</p>
	     	<span class="success" ng-class="{'has-success':signUpForm.username.$valid}">√</span>
	     </div>
	     <div class="login-form-passwd" style="margin-top: 20px;">
		     <input type="password" name="password" class="login-from-password" ng-model="user.password" placeholder="请输入密码"  ng-maxlength="8" ng-minlength="6" required>
		     <p class="error" ng-if="signUpForm.password.$error.required && signUpForm.password.$touched">密码不能为空</p>
	     	 <p class="error" ng-if="(signUpForm.password.$error.minlength || signUpForm.password.$error.maxlength) && signUpForm.password.$touched">密码长度为6~8位</p>
	     	<span class="success" ng-class="{'has-success':signUpForm.password.$valid}">√</span>
	     </div>
	     <button class="login-btn">登录</button>
	 </form>
	 </section>
</body>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="loginjs/script.js"></script>
</html>